<template>
  <div>
    <div class="topSearchSix">
      <div class="topSearchSixLeft">
        <div>
          <p style="margin-right: 20px">广告名称:</p>
          <el-input
            style="width: 300px"
            placeholder="广告名称"
            v-model="form.adSpaceName"
          ></el-input>
        </div>
      </div>
      <div class="topSearchSixRight">
        <el-button
          type="primary"
          :style="{ marginLeft: '20px' }"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button :style="{ marginLeft: '20px' }" @click="handleClear">
          重置
        </el-button>
      </div>
    </div>
    <div class="adv_pos">
      <!-- <div class="form" ref="form">
        <el-form :inline="true" :model="form">
          <el-form-item label="广告名称" label-width="100px">
            <el-input
              style="width: 300px"
              placeholder="广告名称"
              v-model="form.adSpaceName"
            ></el-input>
          </el-form-item>

          <el-button
            @click="handleSearch"
            style="
              background-color: #eb6009;
              color: #fff;
              margin-left: 40px;
              font-weight: bold;
            "
            ><i style="margin-right: 6px" class="el-icon-search"></i>搜索
          </el-button>
          <el-button @click="handleClear">清空</el-button>
        </el-form>
      </div> -->
      <!-- <div class="button" ref="button">
        <el-button
          @click="handleAdd"
          style="background-color: #eb6009; color: #fff; font-weight: bold"
        >
          <i class="el-icon-plus" style="margin-right: 6px"></i>新增
        </el-button>
      </div> -->
      <div class="SecondRow">
        <div class="SecondRowLeft">
          <el-button @click="handleAdd" type="primary"> 新增</el-button>
          <el-button type="text" disabled>
            新增广告位之后，请先去设置档位，不然无法新增该广告位的广告。
          </el-button>
        </div>
        <div class="SecondRowRight"></div>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          stripe
          v-loading="tableLoading"
        >
          <!-- 序号 -->
          <el-table-column
            align="center"
            type="index"
            label="排序"
          ></el-table-column>
          <!-- 广告位编码 -->
          <el-table-column
            align="center"
            label="广告位编码"
            prop="adSpaceCode"
            min-width="100"
          ></el-table-column>
          <!-- 广告位名 -->
          <el-table-column
            align="center"
            label="广告位名"
            prop="adSpaceName"
            min-width="100"
          ></el-table-column>
          <!-- 类别 -->
          <el-table-column
            align="center"
            label="类别"
            prop="showType"
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.showType === 1">图片</span>
            </template>
          </el-table-column>
          <!-- 宽度 -->
          <el-table-column
            align="center"
            label="宽度"
            prop="wide"
            min-width="100"
          ></el-table-column>
          <!-- 高度 -->
          <el-table-column
            align="center"
            label="高度"
            prop="hight"
            min-width="100"
          ></el-table-column>
          <!-- 价格(￥/次) -->
          <el-table-column
            align="center"
            label="价格(￥/次)"
            prop="price"
            min-width="100"
          ></el-table-column>
          <!-- 标记 -->
          <!--          <el-table-column-->
          <!--            align="center"-->
          <!--            label="标记"-->
          <!--            prop="useType"-->
          <!--            min-width="100"-->
          <!--          >-->
          <!--            <template slot-scope="scope">-->
          <!--              <span v-if="scope.row.useType === 1">手机</span>-->
          <!--              <span v-else>电脑</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!-- 广告状态 -->
          <el-table-column
            align="center"
            label="广告状态"
            prop="status"
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status === 1">启用</span>
              <span v-else>关闭</span>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleEdit(scope.row)"
              ><i style="margin-right: 6px" class="el-icon-edit"></i>编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="handleDelete(scope.row)"
              ><i style="margin-right: 6px" class="el-icon-delete"></i>删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end">
          <el-pagination
            background
            style="margin-top: 20px; margin-bottom: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-row>
      </div>
      <!-- /.table -->
      <!-- 新增弹窗 -->
      <el-dialog title="新增广告位置" :visible.sync="addShow" width="60%">
        <el-form
          :inline="true"
          ref="addForm"
          :model="addForm"
          :rules="addRules"
          label-width="160px"
        >
          <!-- 广告位标题 -->
          <el-form-item label="广告位标题" prop="adSpaceName">
            <el-tooltip
              effect="dark"
              content="广告位标题长度在 2 到 20个字符"
              placement="top"
            >
              <el-input
                clearable
                maxlength="20"
                minlength="2"
                style="width: 300px"
                placeholder="广告位标题"
                v-model="addForm.adSpaceName"
              ></el-input>
            </el-tooltip>
          </el-form-item>
          <!-- 广告位类别 -->
          <el-form-item label="广告位类别" prop="showType">
            <el-tooltip
              effect="dark"
              content="选择此广告位广告的形式"
              placement="top"
            >
              <el-select
                clearable
                style="width: 300px"
                placeholder="请选择广告位类别"
                v-model="addForm.showType"
              >
                <el-option label="图片" :value="1"></el-option>
              </el-select>
            </el-tooltip>
          </el-form-item>
          <!-- 广告位宽度 -->
          <el-form-item label="广告位宽度" prop="wide">
            <el-select
              clearable
              style="width: 300px"
              placeholder="广告位宽度"
              v-model="addForm.wide"
            >
              <el-option
                label="1920（适用于PC端首页轮播图、PC端分类广告位、PC端活动广告位）"
                :value="1920"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 广告位高度 -->
          <el-form-item label="广告位高度" prop="hight">
            <el-select
              clearable
              style="width: 300px"
              placeholder="广告位高度"
              v-model="addForm.hight"
            >
              <el-option
                label="460（适用于PC端首页轮播图、PC端分类广告位、PC端活动广告位）"
                :value="460"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 广告位价格 -->
          <el-form-item label="广告位价格" prop="price">
            <el-tooltip
              effect="dark"
              content="广告位价格为数字（￥/次）"
              placement="top"
            >
              <el-input
                style="width: 300px"
                placeholder="广告位价格"
                v-model="addForm.price"
              ></el-input>
            </el-tooltip>
          </el-form-item>
          <!-- 是否启用 -->
          <el-form-item label="是否启用">
            <!-- 启用 -->
            <el-radio-group v-model="addForm.status">
              <el-radio :label="1">启用</el-radio>
              <!-- 禁用 -->
              <el-radio :label="0">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 标记 -->
          <!--          <el-form-item label="标记">-->
          <!--            <el-radio-group v-model="addForm.useType">-->
          <!--              <el-radio :label="2">电脑</el-radio>-->
          <!--              <el-radio :label="1">手机</el-radio>-->
          <!--            </el-radio-group>-->
          <!--          </el-form-item>-->
          <!-- 是否可以售卖 -->
          <el-form-item style="" label="是否可以售卖">
            <el-radio-group v-model="addForm.saleStatus">
              <el-radio :label="1">可以</el-radio>
              <el-radio :label="0">不可以</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 广告位描述 -->
          <el-form-item label="广告位描述" prop="description">
            <el-tooltip
              effect="dark"
              content="广告位描述长度在 3 到 120个字符"
              placement="top"
            >
              <el-input
                style="width: 770px"
                type="textarea"
                placeholder="广告位描述"
                maxlength="120"
                minlength="3"
                show-word-limit
                v-model="addForm.description"
              ></el-input>
            </el-tooltip>
          </el-form-item>
          <!-- 上传图片 -->
          <el-form-item label="广告位默认图片链接" prop="img">
            <el-upload
              :disabled="isDisabled"
              style="display: inline"
              :action="uploadUrl"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :show-file-list="false"
            >
              <el-tooltip
                effect="dark"
                content="最佳尺寸1280*500px （该尺寸根据“广告位高度”和标记的变化联动变化）"
                placement="top"
              >
                <el-input
                  @click.native="handleAddImg"
                  placeholder="最佳尺寸1280*500px （该尺寸根据“广告位高度”和标记的变化联动变化）"
                  style="width: 670px"
                  v-model="addForm.img"
                ></el-input>
              </el-tooltip>
            </el-upload>
            <el-image
              style="
                width: 100px;
                height: 36px;
                display: inline-block;
                vertical-align: middle;
              "
              :src="addForm.img"
              :preview-src-list="[addForm.img]"
              alt=""
            >
              <i class="el-icon-picture-outline"></i>
            </el-image>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleOk">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { cloud } from '@/framework/utils/request'
import {
  addAdvert,
  deleteAdvert,
  editAdvert,
  getAdvertDetail,
  getAdvertList
} from '@/api/mallApi/advert'

export default {
  name: 'AdvPos',
  data() {
    return {
      adStatus: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      isDisabled: true,
      addShow: false,
      addForm: {
        adSpaceName: '',
        img: '',
        showType: '',
        wide: '',
        hight: '',
        price: '',
        status: 1,
        useType: 1,
        saleStatus: 1,
        description: ''
      },
      form: {
        adSpaceName: ''
      },
      tableData: [],
      tableLoading: false,
      uploadUrl: `${this.baseURL()}/sysFileInfo/upload?secretFlag=N&fileBucket=mall`,
      addRules: {
        adSpaceName: [
          { required: true, message: '请输入广告位标题', trigger: 'blur' }
        ],
        showType: [
          { required: true, message: '请选择广告位类别', trigger: 'change' }
        ],
        img: [{ required: true, message: '请上传图片', trigger: 'change' }],
        wide: [
          { required: true, message: '请选择广告位宽度', trigger: 'change' }
        ],
        hight: [
          { required: true, message: '请选择广告位高度', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入广告位价格', trigger: 'blur' },
          {
            pattern: /^[0-9]+(.[0-9]{1,2})?$/,
            message: '请输入正确的价格',
            trigger: 'blur'
          }
        ],
        status: [
          { required: true, message: '请选择是否启用', trigger: 'change' }
        ],
        useType: [
          { required: true, message: '请选择是否标记', trigger: 'change' }
        ],
        saleStatus: [
          { required: true, message: '请选择是否可以售卖', trigger: 'change' }
        ],
        description: [
          { required: true, message: '请输入广告位描述', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    baseURL() {
      return process.env.VUE_APP_BASE_API + cloud.file
    },
    handleClear() {
      this.form.adSpaceName = ''
    },
    handleAdd() {
      this.adStatus = 'add'
      this.addShow = true
    },
    handleEdit(row) {
      this.adStatus = 'edit'
      this.addShow = true
      getAdvertDetail({ id: row.id }).then((res) => {
        this.addForm = res.data
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该广告位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteAdvert({ ids: [row.id] })
            .then((res) => {
              if (res.code === '00000') {
                this.$message.success('删除成功')
                this.getTableData()
              }
            })
            .catch(() => {
              this.$message.error('删除失败')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handlePictureCardPreview(file) {},
    handleRemove(file, fileList) {},
    handleSuccess(response, file, fileList) {
      this.addForm.img = response.data.fileUrl
    },
    handleAddImg() {
      if (!this.addForm.hight && !this.addForm.wide) {
        this.$message.error('请先选择广告位高度和宽度')
        return false
      } else {
        this.isDisabled = false
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    },
    handleOk() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (this.adStatus === 'edit') {
            // 编辑
            editAdvert(this.addForm)
              .then((res) => {
                if (res.code === '00000') {
                  this.$message.success('编辑成功')
                  this.$refs.addForm.resetFields()
                  this.addShow = false
                  this.getTableData()
                }
              })
              .catch((err) => {
                this.$message.error('编辑失败')
              })
          } else {
            // 新增
            addAdvert(this.addForm)
              .then((res) => {
                if (res.code === '00000') {
                  this.$message.success('新增成功')
                  // 重置表单
                  this.$refs.addForm.resetFields()
                  this.addShow = false
                  this.getTableData()
                }
              })
              .catch((err) => {
                this.$message.error('新增失败')
              })
          }
        }
      })
    },
    getTableData() {
      this.tableLoading = true
      const params = {
        adSpaceName: this.form.adSpaceName,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      getAdvertList(params)
        .then((res) => {
          this.tableData = res.data.rows
          this.total = res.data.totalRows
          this.tableLoading = false
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handleSearch() {
      this.getTableData()
    },
    handleCancel() {
      this.addForm = {}
      this.$refs.addForm.resetFields()
      this.addShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.topSearchSix {
  width: 98%;
  margin: 1%;
  background-color: #fff;
  min-height: 75px;
  display: flex;
  justify-content: space-between;

  .topSearchSixLeft {
    width: 1050px;
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    > div {
      display: flex;
      align-items: center;
      margin-left: 10px;
      p {
        font-size: 14px;
      }
    }
  }

  .topSearchSixRight {
    width: 200px;
    display: flex;
    align-items: center;
  }
}

.adv_pos {
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;
  padding: 0 20px;

  .SecondRow {
    width: 100%;
    min-height: 35px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .SecondRowLeft {
      margin-top: 10px;
      margin-left: 10px;
    }

    .SecondRowRight {
      margin-top: 10px;
      margin-right: 20px;
    }
  }

  .form {
    margin-top: 20px;
  }

  .table {
    margin-top: 20px;
  }
}
</style>
